<template>
  <div :style="{ position: isPosition ? 'relative' : '' }"
    style="display: flex; align-items:center;justify-content: space-between; min-height: 40px;">
    <div class="closeBox" @click="close">
      <div class="closeIcon"></div>
    </div>
    <div class="title">{{ title }}</div>
    <div class="searchInputBox" v-if="isSearchInput">
      <a-input v-model:value="inputValue" placeholder="输入关键词搜索" size="small" />
    </div>
  </div>

</template>
<script setup>
import { defineProps, onMounted, watch, ref } from "vue"
const emit = defineEmits(["close", "search"])
const props = defineProps({
  title: {
    type: String,
    default: "弹窗"
  },
  isSearchInput: {
    type: Boolean,
    default: false
  },
  isPosition: {
    type: Boolean,
    default: true
  }
})
const inputValue = ref("")

watch(inputValue, (newVal, oldVal) => {
  emit("search", newVal)
})

const close = () => {
  emit("close")
}
onMounted(() => { })
</script>
<style>
.searchInputBox .ant-input-sm {
  border-radius: 20px;
  padding: 2px 10px;
}

.searchInputBox .ant-input {
  background-color: #4DDECF40;
  border: 1px solid #4DDECF;
  color: #EEF9FF;
  font-size: 12px;
}

.searchInputBox .ant-input::placeholder {
  color: #EEF9FF;
  font-size: 12px;
}
</style>
<style scoped lang="less">
.title {
  color: #d5f2ff;
  padding: 10px;
  font-weight: 500;
  flex: 1;
}

.searchInputBox {
  margin-right: 50px;
}

.closeBox {
  position: absolute;
  right: 0;
  top: 0;
  background-color: #a32438;
  padding: 2px 10px 2px 15px;
  font-size: 24px;
  border-radius: 0 8px 0 20px;
  cursor: pointer;

  .closeIcon {
    background-image: url('/img/myimg/close.png');
    background-size: 15px 15px;
    width: 15px;
    height: 15px;
  }
}
</style>
